<template>
  <div>
    <!-- <router-view name="detaill" /> -->
    <div>
      <el-card>
        <el-form ref="addformRef" :model="addFrom" :rules="addrules">
          <el-row>
            <el-col :span="8">
              <div class="istxt">仓库编码</div>
              <el-input v-model="addFrom.code" placeholder="请输入" disabled />
            </el-col>
            <el-col :span="8">
              <el-form-item prop="name" label="仓库名称">
                <el-input v-model="addFrom.name" placeholder="请输入" />
              </el-form-item>
              <!-- <el-input v-model="addFrom.name" placeholder="请输入" /> -->
            </el-col>
            <el-col :span="8">
              <!-- <div class="istxt">仓库类型</div> -->
              <el-form-item prop="type" label="仓库类型">
                <el-select v-model="addFrom.type" placeholder="请选择活动区域">
                  <el-option label="中转仓" value="ZZ" />
                  <el-option label="加工仓" value="JG" />
                  <el-option label="储备仓" value="CB" />
                  <el-option label="冷藏仓" value="LC" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <!-- <div class="istxt">省/市/区</div> -->
              <el-form-item prop="location" label="省/市/区">
                <el-cascader
                  ref="locationRef"
                  v-model="values"
                  :options="region"
                  :props="{ expandTrigger: 'hover',value: 'value',label: 'label' }"
                  @change="handleChange"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <div class="istxt">详细地址</div>
              <el-input v-model="addFrom.address" placeholder="请输入" />
            </el-col>
            <el-col :span="8">
              <div class="istxt">仓库状态</div>
              <el-radio-group v-model="addFrom.status">
                <el-radio label="1">启用</el-radio>
                <el-radio label="2">停用</el-radio>
              </el-radio-group>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="istxt">仓库面积</div>
              <el-input v-model="addFrom.surface" placeholder="请输入" />
            </el-col>
            <el-col :span="8">
              <!-- <div class="istxt">负责人</div> -->
              <el-form-item prop="personName" label="负责人">
                <el-input v-model="addFrom.personName" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <!-- <div class="istxt">联系电话</div> -->
              <el-form-item prop="phone" label="联系电话">
                <el-input v-model="addFrom.phone" placeholder="请输入" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card class="card">
        <div>
          <el-button round @click="returnList">返回</el-button>
          <el-button type="primary" round @click="addList">提交</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { region } from '@/components/areas.js'
import { radoms, addHouse, editHouse, editHouseAPI } from '@/api/manage-base-info'
export default {
  data() {
    return {
      addFrom: {
        status: '1',
        // 编码
        code: '',
        // 仓库名称
        name: '',
        // 省市区
        location: '',
        // 详细地址
        address: '',
        // 面积
        surface: '',
        // 负责人
        personName: '',
        // 联系电话：
        phone: '',
        // 地区地址
        area: '',
        // 市
        city: '',
        // 省
        province: '',
        // 中转
        type: '',
        id: '',
        createName: '刘世娟',
        updateName: '刘世娟',
        createUser: '0',
        updateUser: '0',
        updateTime: ''

      },
      addrules: {
        name: [
          { required: true, message: '请输入仓库名称', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请输入仓库类型', trigger: 'blur' }
        ],
        location: [
          { required: true, message: '省/市/区', trigger: 'blur' }
        ],
        personName: [
          { required: true, message: '请输入负责人', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, trigger: 'blur', message: '请输入正确手机号格式' }
        ]
      },
      // '120000', '120100', '120101'
      // '内蒙古自治区', '通辽市', '科尔沁区'
      values: [],
      queryFrom: {},
      // 市区
      regionList: []
    }
  },
  // async updated() {

  // },
  async created() {
    this.getregion()
    const res = await radoms()
    this.addFrom.code = res.data
    // 回显数据
    // /api/warehouse/801939901909041313
    // console.log(this.$route.params.id)
    if (this.$route.params.id !== 'null') {
      const res2 = await editHouse(this.$route.params.id)
      this.queryFrom = res2.data
      console.log(this.queryFrom)
      this.addFrom.code = this.queryFrom.code
      this.addFrom.address = this.queryFrom.address
      this.addFrom.createTime = this.queryFrom.createTime
      this.addFrom.name = this.queryFrom.name
      this.addFrom.type = this.queryFrom.type
      this.addFrom.personName = this.queryFrom.personName
      this.addFrom.phone = this.queryFrom.phone
      this.addFrom.surface = this.queryFrom.surface
      this.addFrom.updateTime = this.queryFrom.createTime
      this.queryFrom.id = this.$route.params.id
      this.addFrom.id = this.queryFrom.id
    }

    // this.values = ['120000', '120100', '120102']
  },
  methods: {
    returnList() {
      this.$router.back()
    },
    getregion() {
      this.region = region
    },
    handleChange(value) {
      this.addFrom.location = this.$refs.locationRef.getCheckedNodes()[0].pathLabels.join('/')
      this.addFrom.area = this.$refs.locationRef.getCheckedNodes()[0].value
      this.addFrom.city = this.$refs.locationRef.getCheckedNodes()[0].path[1]
      this.addFrom.province = this.$refs.locationRef.getCheckedNodes()[0].path[0]
      console.log(value)
    },
    addList() {
      this.$refs.addformRef.validate(async(valid) => {
        if (this.$route.params.id !== 'null') {
          if (!valid) this.return
          console.log(this.addFrom)
          await editHouseAPI(this.addFrom)
          this.$message.success('修改成功！')
          this.$router.back()
        } else {
          if (!valid) this.return
          await addHouse(this.addFrom)
          this.$message.success('你终于请求成功了！！！')
          this.$router.back()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card{
    padding: 10px;
}
.card{
  text-align: center;
  padding: 0px;
  margin-bottom: 1px;
}
.el-button{
  width: 170px;
}
div{
  font-size: 12px;
    font-family: PingFangSC,PingFangSC-Medium;
    font-weight: 500;
    color: #887e7e;
}
.el-row{
  margin-top: 30px;
}
.el-col{
  padding-left: 15px;
    padding-right: 15px;
  // margin-right: 15px;
}
.istxt{
  margin-bottom: 20px;
}
.el-cascader{
  width: 100%;
}
.el-select{
  width: 100%;
}
.el-form-item{
 font-size: 12px;
 margin-top: -6px;
 ::v-deep .el-form-item__label {
  font-size: 12px;
 }
}
</style>
